<template>
<div>
    <h3>{{obj}}</h3>
</div>
  <div class="xtx-pagination">
<a href="javascript:;" :class="{disabled:obj.count===start}" @click="changes('-')">上一页</a>
    <span v-show="start!=1">...</span>
    <a href="javascript:;" :class="{active:item==obj.count}" v-for="item in conent" :key="item" @click="obj.count=item">{{item}}</a>
    <!-- <a href="javascript:;">4</a>
    <a href="javascript:;">5</a>
    <a href="javascript:;">6</a>
    <a href="javascript:;">7</a> -->
    <span v-show="end!=obj.pageindex">...</span>
    <a href="javascript:;" @click="changes('+')" :class="{disabled:obj.count===end}">下一页</a>
  </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
  props: {
    total: {
      type: Number, // 总条数
      required: true
    },
    pageSize: {
      type: Number, // 页容量
      default: 10
    },
    count: {
      type: Number, // 当前页
      default: 1
    },
    coountpage: {
      type: Number, // 按钮数量
      default: 5
    }
  },
  name: 'XtxPagination',
  emits: ['pagechange'],
  setup (props, { emit }) {
    //   定义需要用到的数据
    const all = computed(() => {
      // 总页数
      const a = Math.ceil(props.total / obj.value.pageSize)
      return a
    })
    watch(props, () => {
      console.log('子组件收到的数据', props.count)
      obj.value.count = props.count
    })
    const obj = ref({
      total: props.total, // 总数
      pageindex: all, // 总页数
      pageSize: props.pageSize, // 页容量
      count: props.count, // 当前页
      coountpage: props.coountpage // 按钮数
    })
    const start = ref(null) // 起始页
    const end = ref(null) // 结束页
    // 获取起始页和结束页
    const conent = ref([])
    watch(obj.value, () => {
      conent.value = []
      //   console.log(start.value, end.value)
      start.value = obj.value.count > Math.floor(obj.value.coountpage / 2) ? obj.value.count - Math.floor(obj.value.coountpage / 2) : 1
      if (obj.value.count > obj.value.pageindex - Math.floor(obj.value.coountpage / 2)) {
        start.value = obj.value.pageindex - obj.value.coountpage + 1
        end.value = obj.value.pageindex
      }
      end.value = start.value + obj.value.coountpage - 1
      // 获取编码
      for (let i = start.value; i < end.value + 1; i++) {
        conent.value.push(i)
      }
      emit('pagechange', obj.value.count)
    }, { immediate: true })

    // 上一页下一页按钮
    const changes = (p) => {
      if (p === '-') {
        if (obj.value.count === start.value) {
        //   console.log('xxxx', obj.value.count)
          obj.value.count = start.value
        } else {
          obj.value.count--
        }
      } else {
        if (obj.value.count === end.value) {
          obj.value.count = obj.value.pageindex
        //   console.log('dddddd', obj.value.count)
        } else {
          obj.value.count++
        }
      }
    }
    return { obj, conent, end, start, changes }
  }
}
</script>
<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>
